<template>
    <li @click="toBusinessInfo">
      <div class="business-img">
        <img :src="business.businessImg" />
        
      </div>
      <div class="business-info">
        <h3>{{ business.businessName }}</h3>
        <p>&#165;{{ business.starPrice }}起送 | &#165;{{ business.deliveryPrice }}配送</p>
        <p>{{ business.businessExplain }}</p>
      </div>
    </li>
  </template>
  
  <script>
  export default {
    name: 'BusinessItem',
    props: {
      business: Object
    },
    created() {
    // 在组件创建时检查 business.quantity 的值
    console.log(this.business.quantity);
  },
  
    methods: {
      toBusinessInfo() {
        this.$emit('business-info', this.business.businessId);
      }
    }
  };
  </script>
  
  <style scoped>
    .business li {
      width: 100%;
      box-sizing: border-box;
      padding: 2.5vw;
      border-bottom: solid 1px #DDD;
      user-select: none;
      cursor: pointer;
      display: flex;
      align-items: center;
    }
  
    .business-img {
      position: relative;
    }
  
    .business-img img {
      width: 20vw;
      height: 20vw;
      border-radius: 10px;
    }
  
    .business-img .business-img-quantity {
      width: 5vw;
      height: 5vw;
      background-color: red;
      color: #fff;
      font-size: 3.6vw;
      border-radius: 2.5vw;
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      right: -1.5vw;
      top: -1.5vw;
    }
  
    .business-info {
      margin-left: 3vw;
    }
  
    .business-info h3 {
      font-size: 3.8vw;
      color: #555;
    }
  
    .business-info p {
      font-size: 3vw;
      color: #888;
      margin-top: 2vw;
    }
  </style>